<template>
  <div class="v3c">
    <!-- 天 -->
    <div class="mt-15">
      <div>星期</div>
      <el-select v-model="state.week.specificSpecific" multiple style="width: 140px">
        <el-option
          v-for="(item, index) in weekList"
          :key="index"
          :label="item.name"
          :value="item.value"
        />
      </el-select>
    </div>
    <!-- 小时 -->
    <div class="mt-15">
      <div>小时</div>
      <el-select v-model="state.hour.specificSpecific" multiple style="width: 140px">
        <el-option v-for="(item, index) in 24" :key="index" :label="index" :value="index" />
      </el-select>
    </div>
    <!-- 分钟 -->
    <div class="mt-15">
      <div>分钟</div>
      <el-select v-model="state.minute.specificSpecific" multiple style="width: 140px">
        <el-option v-for="(item, index) in 60" :key="index" :label="index" :value="index" />
      </el-select>
    </div>
    <!-- 秒 -->
    <div class="mt-15">
      <div>秒</div>
      <el-select v-model="state.second.specificSpecific" multiple style="width: 40%">
        <el-option v-for="(item, index) in 60" :key="index" :label="index" :value="index" />
      </el-select>
    </div>
    <!-- 结果 -->
    <div class="v3c-footer">
      <div style="flex: 1">
        CRON &nbsp;: &nbsp;&nbsp;<span class="cron">{{ cron }}</span>
        &nbsp; &nbsp; &nbsp;
        <!-- <button class="btn-ok" @click="handleClick">生成cron</button> -->
        <button @click="rest">重置</button>
        <button class="btn-ok" @click="text">测试</button>
      </div>
    </div>
  </div>
</template>
  
  <script>
import { reactive, computed, defineComponent } from 'vue'

export default defineComponent({
  name: 'Vue3Cron',
  setup(_, { emit }) {
    const weekList = [
      { name: '星期一', value: 'MON', val: 2 },
      { name: '星期二', value: 'TUE', val: 3 },
      { name: '星期三', value: 'WED', val: 4 },
      { name: '星期四', value: 'THU', val: 5 },
      { name: '星期五', value: 'FRI', val: 6 },
      { name: '星期六', value: 'SAT', val: 7 },
      { name: '星期日', value: 'SUN', val: 1 }
    ]

    const state = reactive({
      second: { specificSpecific: [] },
      minute: { specificSpecific: [] },
      hour: { specificSpecific: [] },
      week: { specificSpecific: [] }
    })

    const selectedValuesText = (selectedValues) => {
      return selectedValues.join(',')
    }

    const cron = computed(() => {
      const secondsText = selectedValuesText(state.second.specificSpecific)
      const minutesText = selectedValuesText(state.minute.specificSpecific)
      const hoursText = selectedValuesText(state.hour.specificSpecific)
      const weeksText = selectedValuesText(state.week.specificSpecific)
      return `${secondsText || '*'} ${minutesText || '*'} ${hoursText || '*'} ? * ${
        weeksText || '*'
      } *`
    })

    const handleClick = () => {
      // emit('change', cron.value)
    }

    const text = (data) => {
      state.week.specificSpecific = data.day.length === 7 ? [] : data.day
      const timeString = data.time
      const timeArray = timeString.split(':')
      const hour = [timeArray[0]]
      const minute = [timeArray[1]]
      const seconds = [timeArray[2]]
      state.hour.specificSpecific = hour
      state.minute.specificSpecific = minute
      state.second.specificSpecific = seconds

      return cron.value
    }

    const rest = () => {
      state.second = { specificSpecific: [] }
      state.minute = { specificSpecific: [] }
      state.hour = { specificSpecific: [] }
      state.week = { specificSpecific: [] }
    }

    return {
      weekList,
      state,
      cron,
      handleClick,
      rest,
      text
    }
  }
})
</script>
  
  <style lang="css" scoped>
.btn-ok {
  line-height: 1.5715;
  position: relative;
  display: inline-block;
  font-weight: 400;
  white-space: nowrap;
  text-align: center;
  background-image: none;
  border: 1px solid transparent;
  box-shadow: 0 2px #00000004;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  touch-action: manipulation;
  height: 32px;
  padding: 4px 15px;
  font-size: 14px;
  border-radius: 2px;
  color: #fff;
  background: #409eff;
  border-color: #409eff;
  text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
  box-shadow: 0 2px #0000000b;
}
</style>
  